<template>
	<view class="container">
		<section>
			<view class="sect-box">
				<view class="sect-title">反馈原因</view>
				<view class="sect-tabList">
					<view :class="[type == item.title ? 'tab-item tab-item-active' : 'tab-item']" v-for="(item, index) in tabList"
						:key="index" @click="type = item.title">
						{{ item.title }}
					</view>
				</view>
				<view class="sect-title">问题说明</view>
				<textarea placeholder='请输入问题说明' v-model="content" maxlength="100"></textarea>
				<view class="sect-camera" @click="getState" v-if="images == ''">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/upload.png"  class="icon" mode=""></image>
				<!-- 	<u-upload @afterRead="afterRead" :maxCount="1">
						<image class="card-img" :src='images' alt="" v-if="images != ''" mode='aspectFit|aspectFill|widthFix' />
						<view class="card-upload" v-else>
							<u-icon name="camera" size="30"></u-icon>
							<text>添加照片</text>
						</view>
					</u-upload> -->
				</view>
				<view class="sect-camera" @click="getState" v-else>
					<image :src="images"  class="icons" mode=""></image>
				</view>

			</view>
		</section>

		<footer>
			<button @click="handleSubmit">提交</button>
		</footer>
	</view>
</template>
<script>
	import store from '../../../store';
	import {
		getUserInfo
	} from '@/common/auth';
	export default {
		data() {
			return {
				tabList: [{
						id: 1,
						title: '产品建议'
					},
					{
						id: 2,
						title: '活动反馈'
					},
					{
						id: 3,
						title: '系统BUG'
					},
					{
						id: 4,
						title: '优化建议'
					},
				],

				type: '优化建议',
				content: '',
				images: '',
			}
		},
		onLoad() {
		},
		methods: {
			//图片上传 
			// async afterRead(event) {
			// 	let result = await this.$tools.uploadImage(event.file.url)
			// 	this.images = result.data;
			// },
			async getState() {
				// #ifdef APP-PLUS 
				let result = await this.$store.dispatch("requestPermissions", 'WRITE_EXTERNAL_STORAGE')
				if (result !== 1) return
				// #endif 
				this.chooseImg()
			},
			async getUserInfo() {
				const {
					userId
				} = this;
				const {
					data
				} = await this.$request.miniGetUserInfo({
					userId
				})
				this.userInfo = data
			},
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let tempAvatar = res.tempFilePaths[0];
						that.uploadImage(tempAvatar);
					}
				});
			},
			async uploadImage(tempAvatar) {
					if (tempAvatar) {
						// 上传新头像
						let result = await this.$tools.uploadImage(tempAvatar)
						this.images = result.data
					}
			},
			//提交
			handleSubmit() {
				const {
					content,
					type,
					images
				} = this;
				let info = getUserInfo()
				const param = {
					content,
					type,
					images,
					userId: info.userId
				};
				if (content == '') return this.$toast('请填写问题说明')
				this.$request.feedbackSubmit(param).then(res => {
					if (res.code == 200 && res.isSuccess) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						this.content = '';
						this.images = '';
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		padding-top: 45rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC-Medium';
		color: #333;


		section {
			height: 100%;
			position: relative;
			top: -40rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			.sect-camera{
				width: 150rpx;
				height: 150rpx;
				background: #FAFAFA;
				.icon{
					width: 80rpx;
					height: 70rpx;
					display: block;
					padding: 40rpx 0 0 30rpx;
				}
				.icons{
					width: 150rpx;
					height: 150rpx;
				}
			}

			.sect-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				padding: 24rpx;
				padding-bottom: 150rpx;
				box-sizing: border-box;

				.sect-title {
					font-size: 32rpx;
					font-family: 'PingFang SC-Bold';
					margin-bottom: 24rpx;

				}

				.sect-tabList {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-bottom: 48rpx;

					.tab-item {
						width: 160rpx;
						height: 60rpx;
						background: #FAFAFA;
						border-radius: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #666;
					}

					.tab-item-active {
						border: 1rpx solid #32B499;
						color: #32B499;
						background-color: #fff;
						box-sizing: border-box;
					}

				}

				textarea {
					width: 100%;
					height: 300rpx;
					background: #FAFAFA;
					border-radius: 8px;
					padding: 24rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;
				}

				.card-img {
					width: 160rpx;
					height: 160rpx;
					display: block;
					border-radius: 16rpx;
				}

				.card-upload {
					width: 140rpx;
					height: 140rpx;
					background: #FAFAFA;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		footer {
			width: 100%;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(51, 51, 51, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			button {
				width: 90%;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: 'PingFang SC-Medium';
				background-color: #32B499;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>